"use client"
import dynamic from 'next/dynamic'

const LuckyWheelPage = dynamic(() => import('./pages/lucky/lucky-wheel-page').then(mod => mod.LuckyWheelPage))
const LuckyGridPage = dynamic(() => import('./pages/lucky/lucky-grid-page').then(mod => mod.LuckyGridPage))
const StrategyArmoryButton = dynamic(async()=>(await import("./components/StrategyArmory")).StrategyArmory)

export default function Home() {
    return (
        <div className="flex flex-col items-center min-h-screen bg-gray-100 p-4">
            {/* 头部文案 */}
            <header className="text-4xl font-bold text-center text-gray-800 mt-8">
                大营销平台 - 抽奖展示
            </header>

            {/* 装配抽奖 */}
            <StrategyArmoryButton/>

            {/* 中间的两个div元素 */}
            <div className="flex-1 flex items-center justify-center w-full">
                <div className="flex flex-row gap-2 w-full max-w-5xl overflow-x-auto justify-center">
                    <div className="w-[400px] p-4 bg-white shadow-lg rounded-lg flex justify-center">
                        <div className="text-gray-700">
                            <h2 className="text-xl font-semibold mb-2 text-center">幸运大转盘</h2>
                            <LuckyWheelPage/>
                        </div>
                    </div>
                    <div className="w-[400px] p-4 bg-white shadow-lg rounded-lg flex justify-center border-2 border-gray-200">
                        <div className="text-gray-700">
                            <h2 className="text-xl font-semibold mb-2 text-center">九宫格抽奖</h2>
                            <LuckyGridPage/>
                        </div>
                    </div>
                </div>
            </div>

            {/* 底部文案 */}
            <footer className="text-gray-600 text-center mt-8 mb-4">
                本项目为 Jraysx 的项目
            </footer>
        </div>
    );
}
